<template>
    <div id="head">
      <div class="head_one">
        <div class="img_div">
          <img class="img_xh" src="../assets/login/schoolname.png">
          <span>网上迎新专题网</span>
        </div>
      </div>
      <div class="head_two">
        <div class="bar_div">
          <div class="img_home_div">
            <router-link to="/"><img class="img_home" src="../assets/login/home.svg"></router-link>
          </div>
          <div class="bartext_div">
            <ul>
              <li>
                <router-link to="/">首页</router-link>
              </li>
              <li>
                <router-link to="/dist/guide">报到须知</router-link>
              </li>
              <li>
                <router-link to="/dist/login">网上报到</router-link>
              </li>
              <li>
                <router-link to="/dist/strategy">校园攻略</router-link>
              </li>
              <li>
                <router-link to="/dist/map">校园地图</router-link>
              </li>
              <li>
                <a target="_blank" href="http://www.sicnu.edu.cn/">学校官网</a>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
	name: 'Navbar'
}
</script>

<style lang="less">
#head {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 120px;
  background:inherit;
  background-color:#006d36;
  box-sizing:border-box;
}

.head_one {
  margin: auto;
  width: 100%;
  height: 70px;
}

.img_div {
  margin: auto;
  width: 1100px;
  height: 70px;
}

.img_xh {
  position: relative;
  top: 15px;
  width: 280px;
  height: 55px;
  float: left;
}

.img_div span {
  color: #ffffff;
  font-size: 35px;
  font-weight: 300;
  font-family: "STXingkai";
  text-shadow: 3px 3px 0 #292929;
  float: left;
  position: relative;
  left: 20px;
  top: 35px;
}

.head_two {
  position: relative;
  width: 100%;
  height: 50px;
  top: 0;
}

.bar_div {
  margin: auto;
  width: 1100px;
  height: 50px;
}

.img_home_div {
  position: relative;
  width: 20px;
  height: 2px;
  left: 175px;
  top: 20px;
}

.img_home {
  width: 20px;
  height: 20px;
}

.bartext_div {
  margin: 18px auto 0;
  width: 900px;
  height: 25px;
  display: flex;
}

.bartext_div ul {
  margin: auto;
  width: 100%;
  height: 25px;
}

.bartext_div li {
  width: 16.6%;
  float: left;
  list-style: none;
}

.bartext_div ul li a {
    color: #ffffff;
    font-size: 16px;
    font-weight: 530;
    //overflow: hidden;
    text-decoration: none;
}
</style>
